<template>
  <div class="container">
    <van-nav-bar title="我的订单" left-arrow @click-left="onClickLeft" />
    <scroller style="top:50px">
      <van-tabs @click="onTabs" animated v-model="active">
        <van-tab :title="v.name" v-for="(v,i) in list" :key="i">
          <!-- 订单详情 -->
          <van-card
            :num="v.num"
            :price="v.price.toFixed(2)"
            :desc="v.desc"
            :title="v.title"
            :thumb="v.src"
            v-for="(v,i) in $store.state.order.keepOrder"
            :key="i"
          >
            <template #footer>
              <van-button color="#f96c2f" v-if="v.isClass==1" plain size="mini">去付款</van-button>
              <van-button color="gray" v-if="v.isClass==2" plain size="mini">查看详情</van-button>
              <van-button color="gray" v-if="v.isClass==3" plain size="mini">查看物流</van-button>
              <van-button color="#f96c2f" v-if="v.isClass==3" plain size="mini">确认收货</van-button>
              <van-button color="gray" v-if="v.isClass==4" plain size="mini">去评价</van-button>
            </template>
          </van-card>
        </van-tab>
      </van-tabs>
    </scroller>
  </div>
</template>

<script>
import { OrderList } from '@/api/api.js'
export default {
  name: 'YscShopOrder',

  data () {
    return {
      active: 0,
      // tab
      list: [
        {
          name: '全部',
        },
        {
          name: '代付款',
        },
        {
          name: '代发货',
        },
        {
          name: '待收货',
        },
        {
          name: '已完成',
        },

      ],
      // 订单信息
      order: []
    };
  },
  mounted () {
    const query = this.$route.query.index;
    if (query) {
      this.active = Number(query);
      this.filterItem(Number(query))
    }
  },
  created () {
    this.getOrderList()
  },
  methods: {
    // 返回
    onClickLeft () {
      this.$router.back()
    },
    // 获取全部订单列表
    async getOrderList () {
      const { data: res } = await OrderList({ token: this.$store.state.myUserInfo.token })
      if (res.data.code != 200) return this.$toast('请求失败')
      // 根据类型排序 isClass
      res.data.order.sort((a, b) => {
        return a.isClass - b.isClass
      })
      // 数据存储
      this.$store.commit('setOrder', res.data.order)
      // 数据暂存区
      this.$store.commit('setKeepOrder', res.data.order)
    },
    filterItem (val) {
      const item = this.$store.state.order.orderList.filter(v => v.isClass == val);
      this.$store.commit('setKeepOrder', item)
    },
    // 切换列表
    onTabs (index) {
      // 处理判断订单数据的不同属性
      if (index == 0) {
        this.$store.commit('setKeepOrder', this.$store.state.order.orderList)
      } else if (index == 1) {
        this.filterItem(1)
      } else if (index == 2) {
        this.filterItem(2)
      } else if (index == 3) {
        this.filterItem(3)
      } else if (index == 4) {
        this.filterItem(4)
      }
    }
  },
};
</script>

<style lang="less" scoped>
.van-card {
  background-color: #fff;
}
.van-button {
  border-radius: 3px;
}
.van-card__price {
  color: #f96c2f;
}
</style>